<template>
	<view class="add-bank-card">
		<form @submit="submitForm">
			<view class="add-bank-item" v-for="(item,index) in iptDatas" :key="index">
				<view class="add-bank-left">
					{{item.label}}
				</view>
				<view class="add-bank-ipt">
					<input class="ipt" :maxlength="item.maxLength" :placeholder="'请输入'+item.label"
						placeholder-style="color:#D0D0D0;font-size: 26rpx;" :name="item.label"
						v-model="item.value"></input>
				</view>
				<view class="get-num" v-if="item.label==='验证码'">
					<text class="get-num-time" v-if="timeMin <= 60 && timeMin > 0">{{timeMin}}秒</text>
					<text v-else @click="getNum">获取验证码</text>
				</view>
			</view>

			<!-- 确认添加  active -->
			<button class="btn" form-type="submit">
				确认添加
			</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iptDatas: [{
					label: '姓名',
					value: '',
					maxLength: 6
				}, {
					label: '身份证号',
					value: '',
					maxLength: 18
				}, {
					label: '银行卡号',
					value: '',
					maxLength: 10
				}, {
					label: '开户行',
					value: '',
					maxLength: 6
				}, {
					label: '手机号码',
					value: '',
					maxLength: 11
				}, {
					label: '验证码',
					value: '',
					maxLength: 6
				}],
				// 验证码 定时器
				timeMin: 61,
				timer: null
			}
		},
		methods: {
			// 获取验证码
			getNum() {
				// 每次点击之前 不存在定时器 则开启定时器
				if (!this.timer) {
					this.openSetInterval()
				}
			},
			// 打开定时器
			openSetInterval() {
				this.timeMin = 60
				this.timer = setInterval(() => {
					this.timeMin--
					// 倒计时为0时 清除定时器
					if (this.timeMin === 0) {
						this.closeSetInterval()
					}
				}, 1000)
			},
			// 关闭定时器
			closeSetInterval() {
				clearInterval(this.timer)
				this.timer = null
				this.timeMin = 61
			},
			submitForm(e) {
				console.log(e.target.value)
			}
		},
		onUnload() {
			// 离开页面 清除定时器
			if (this.timer) {
				this.closeSetInterval()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-bank-card {
		width: 100vw;
		font-size: 26rpx;
		color: #333;

		.add-bank-item {
			display: flex;
			padding: 26rpx 30rpx;
			background-color: #fff;

			.add-bank-left {
				width: 150rpx;
				line-height: 48rpx;
			}

			.add-bank-ipt {
				width: 310rpx;

				.ipt {
					height: 48rpx;
					font-size: 26rpx;
				}
			}

			// 获取验证码
			.get-num {
				width: 220rpx;
				font-weight: 500;
				color: #FF7803;
				text-align: right;

				.get-num-time {
					margin-left: 20rpx;
				}
			}
		}

		.add-bank-item:nth-child(3),
		.add-bank-item:nth-child(5) {
			margin-top: 18rpx;
		}

		.btn {
			width: 690rpx;
			border-radius: 44rpx;
			margin: 64rpx auto 0;
			line-height: 88rpx;
			background: #D0D0D0;
			font-size: 28rpx;
			color: #fff;

			// 去除边框线
			&::after {
				border: none;
			}

			&.active {
				background: #FF7803;
			}
		}
	}
</style>
